<template>
  <div class="form-elements">
    <div class="row">
      <div class="flex xs12">
        <va-card :title="'添加入住信息'">
          <form>
            <div class="row">
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="date"
                  type="date"
                  :label="'日期'"
                />
              </div>
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="time"
                  type="time"
                  :label="'时间'"
                />
              </div>
            </div>

            <div class="row">
              <div class="flex md3 sm6 xs12">
                <span>城市：</span>
                <el-select v-model="value" placeholder="请选择" @change="cityChange">
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="flex md3 sm6 xs12">
                <span>酒店名称：</span>
                <el-select v-model="value2" placeholder="请选择" @change="hotelChange">
                  <el-option
                    v-for="item in hotelList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>

            <div class="row">
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="roomNum"
                  type="text"
                  :label="'房间号'"
                />
              </div>
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="peoples"
                  type="number"
                  min="0"
                  max="10"
                  :label="'人数'"
                />
              </div>

            </div>
            <div class="row">
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="userRealname"
                  type="text"
                  :label="'入住人姓名'"
                />
              </div>
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="userIdcard"
                  type="text"
                  :label="'入住人身份证'"
                />
              </div>
            </div>
            <div class="row">
              <div class="flex md3 sm6 xs12">
                <va-input
                  v-model="remark"
                  type="text"
                  :label="'备注'"
                />
              </div>
            </div>
            <div class="row">
              <va-button @click="subadd">提交</va-button>
            </div>
          </form>
        </va-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'form-elements',
  data () {
    return {
      cityList: [],
      value: '',
      hotelList: [],
      value2: '',
      hotelId: '',
      cityId: '',
      time: '',
      date: '',
      peoples: 0,
      roomNum: '',
      userRealname: '',
      userIdcard: '',
      remark: '',
    }
  },
  created () {
    var _this = this
    _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/citylist').then(function (res) {
      _this.cityList = res.data.data
    })
  },
  methods: {
    cityChange (val) {
      this.cityId = val
      this.value2 = ''
      var _this = this
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist?cityId=' + val).then(function (res) {
        if (res.data.code == 80200) {
          _this.hotelList = res.data.data
        } else {
          alert(res.data.msg)
        }
      })
    },
    hotelChange (val) {
      this.hotelId = val
    },
    subadd () {
      if (this.userRealname == '') {
        this.showmsg('入住人姓名为空')
        return
      }
      var _this = this
      if (_this.cityId == '') {
        alert('请选择城市')
        return
      }
      if (_this.hotelId == '') {
        alert('请选择酒店')
        return
      }
      var fd = new URLSearchParams()
      fd.append('id', new Date().getTime())
      if (this.date != '') {
        const dt = new Date(this.date + ' ' + this.time)
        fd.append('inTime', dt.toString())
      }
      fd.append('cityId', this.cityId)
      fd.append('hotelId', this.hotelId)
      fd.append('operatorId', 1) // test
      fd.append('peoples', this.peoples)
      fd.append('remark', this.remark)
      fd.append('roomNum', this.roomNum)
      fd.append('userIdcard', this.userIdcard)
      fd.append('userRealname', this.userRealname)

      this.$http.post('http://8.135.35.123:9000/hotelsystem/checkin/add', fd)
        .then(function (response) {
          if (response.data.code == 80200) {
            _this.showmsg('添加成功')
            _this.$router.push({ name: 'checkin-list' })
          }
        },
        function (err) {
          console.log(err)
        },
        )
    },

    showmsg (msg) {
      this.showToast(
        msg, {
          position: 'top-center',
          duration: 2500,
          fullWidth: false,
        },
      )
    },
  },
}
</script>

<style>
  .row.row-inside {
    max-width: none;
  }
</style>
